<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>创建新菜单</title>
<jsp:include page="../addlink.jsp" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/public_form.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/css/system_add.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/lib/zTree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"	src="${pageContext.request.contextPath}/statics/lib/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript"	src="${pageContext.request.contextPath}/statics/lib/zTree/js/jquery.ztree.excheck.js"></script>
<script>

	var setting = {
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true,
					idKey:"id",
					pIdKey:"parentId",
					rootPId:0
				}
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick
			}
		};

		function beforeClick(treeId, treeNode) {
			/* var check = (treeNode && !treeNode.isParent);
			if (!check) alert("只能选择城市...");
			return check; */
		};
	
		//点击树节点 时将选中节点返回给页面
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("menuTree");
			var nodes = zTree.getSelectedNodes();
			var nodeName = nodes[0].name;
			var nodeId = nodes[0].id;
				$("#parentId").attr("value", nodeId);
			$("#parentName").attr("value", nodeName);
			//为使得用户体验更加，选中节点后，影藏数结构
			hideMenu() ;
		};
		//点击搜索框，显示树
		function showMenu() {
			var parentObj = $("#parentName");
			var parentOffset = parentObj.offset();
			$("#menuContent").css({left:parentOffset.left + "px", top:parentOffset.top + parentObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		};
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		};
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		};
		$(document).ready(function(){
			//此地方要稍微注意下，考虑不将本身以及下级节点显示出来，怕选择错误，造成连环套
			var menuId = $("#id").val();
			$.get("${basePath}/sys/menu/getParentMenuTreeData?menuId="+menuId,
					function(zNodes){
						//初始化数结构
						//var jsonObj= $.parseJSON(zNodes.jsonObj);
						var tree = $.fn.zTree.init($("#menuTree"), setting, zNodes);
						//默认展开节点
						var nodes = tree.getNodesByParam("level",3);
						for(var i=0;i<nodes.length;i++){
							tree.expandNode(nodes[i],true,false,false);
						}
						//如果是进入修改页面，定位到当前选中的节点
						var selectNodeId = $("#parentId").val();
						if(selectNodeId!=null){
							tree.selectNode(tree.getNodeByParam("id",selectNodeId,null));
						}
				
			});
		});
	
	$(function(){
		var editFlag = ${editFlag};
		url = "${basePath}/sys/menu/saveMenu";
		if(editFlag == 2){
			url = "${basePath}/sys/menu/updateMenu";
		}
		$("#saveMenu").on('click',function(){
			//获取字典修改后的信息数据,组装成json字符串
			var formObject = {};
			var formArray =$("form:first").serializeArray();
			$.each(formArray, function(i, item){
				if(item.name != 'parentName'){
					formObject[item.name]=item.value;
				} 
			});
			
			console.log(JSON.stringify(formObject));
			//return false;
			$.ajax({
				type:"POST",
				url:url,
				dataType:'json', 
				contentType :"application/json;charset=UTF-8",
				data: JSON.stringify(formObject),//传递给服务器的参数	
				success:function(data){
					if(data.code == -998){
						zxTips_short({txt:data.message});
						//alert(data.message);
					}else if(data.code == 200){
						setTimeout(function(){
							//history.go(-1);
							window.location.href = "${basePath}/sys/menu/toMenuList"
						},1000);
						zxTips_short({txt:data.message});
					}
				},error:function(){
						zxTips_short({txt:"请求失败"});
				}
			});
		});
	});
</script>
</head>
<body>

	<jsp:include page="../head.jsp" />

	<div class="container-fluid all">
		<jsp:include page="../menu.jsp" />
		<div class="maincontent">
			<ol class="breadcrumb">
				<li class="url-root"><a>系统设置</a></li>
				<li class="url-root"><a>菜单管理</a></li>
				<li class="active">创建新菜单</li>
			</ol>
			<div class="form_mode">
				<form class="form-horizontal" method="post" action="#">
					<input id="id" name="id" type="hidden" value="${menu.id}"/>
					<div class="form-group">
						<label class="col-sm-2 control-label">上级菜单</label>
						<div class="col-sm-10 input-group"   style="padding-left:15px;">
							<input id="parentId" name="parentId" class="required" type="hidden" value="${menu.parentId}"/>
							<input id="parentName" type="text" class="form-control" readonly="readonly" name="parentName" value="${menu.parentName}">
							 <span class="input-group-btn">  
								 <a id="menuButton" href="javascript:showMenu();" class="btn btn-info btn-search" style="height:35px;line-height:35px;">查找</a>  
							 </span>
						</div>
					</div>
					<div id="menuContent" class="col-sm-4" style="z-index:100;display:none; position: absolute; background: #f0f6e4;left:360px;top:188px;">
						<ul id="menuTree" class="ztree col-sm-4"></ul>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">名称</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="name" value="${menu.name}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">url</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="url" value="${menu.url}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">权限</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="permission" value="${menu.permission}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">类型</label>
						<div class="col-sm-10">
							<select class="form-control" name="type">								
								<option value="menu" <c:if test="${menu.type eq 'menu'}">selected="selected"</c:if>>菜单</option>
								<option value="permission" <c:if test="${menu.type eq 'permission'}">selected="selected"</c:if>>权限</option>
							</select>
							<%-- <input type="text" class="form-control" name="type" value="${menu.type}"> --%>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">是否显示</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="isShow" value="${menu.isShow}">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">排序</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="sort" value="${menu.sort}">
						</div>
					</div>
					
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<span class="btn btn-success" id="saveMenu">保存</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<jsp:include page="../foot.jsp" />
</body>
</html>
